<template>
	<div class="column">
		<Myheader title="栏目管理" :show="false"></Myheader>

		<div class="group">
			<h3>已关注栏目</h3>
			<p class="desc">点击删除以下频道</p>
			<div class="list">
				<span class="item" v-for="item in followlist" :key="item.id" @click="delfn(item)">{{ item.name }}</span>
			</div>
		</div>
		<div class="group unfollow">
			<h3>未关注栏目</h3>
			<p class="desc">点击添加以下频道</p>
			<div class="list">
				<span class="item" v-for="item in unfollowlist" :key="item.id" @click="addfn(item)">{{ item.name }}</span>
			</div>
		</div>
	</div>
</template>

<script>
import {getcategoryAPI} from "@/apis/category";
import {getToken, setCate, getCate, setunCate, getunCate} from "@/utils/localData";
import Myheader from "@/components/Myheader.vue";
export default {
	data() {
		return {
			followlist: getCate() || [],
			unfollowlist: getunCate() || [],
		};
	},
	components: {
		Myheader,
	},
	async created() {
		// 如果没有 再初始化  不然刷新过快有bug
		if (this.followlist.length !== 0 && this.unfollowlist.length !== 0) return;
		const res = await getcategoryAPI();
		// console.log(res.data.data);
		if (getToken()) {
			res.data.data.splice(0, 2);
		} else {
			res.data.data.splice(0, 1);
		}
		this.followlist = res.data.data;
	},
	methods: {
		delfn(item) {
			// console.log(name);
			if (this.followlist.length === 1) return this.$toast("最少关注一个");
			this.followlist = this.followlist.filter((i) => {
				return i.id !== item.id;
			});
			this.unfollowlist.unshift(item);
		},
		addfn(item) {
			this.unfollowlist = this.unfollowlist.filter((i) => {
				return i.id !== item.id;
			});
			this.followlist.push(item);
		},
	},
	watch: {
		followlist() {
			setCate(this.followlist);
			setunCate(this.unfollowlist);
		},
	},
};
</script>

<style lang="less" scoped>
.group {
	padding: 10px;
	h3 {
		font-size: 16px;
		margin: 10px 0;
	}

	.desc {
		font-style: 13px;
		color: #999;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		.item {
			height: 35px;
			width: 23%;
			margin: 1%;
			border: 1px solid #ddd;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			&::after {
				content: "-";
			}
		}
	}
}
.unfollow {
	.list {
		line-height: 35px;
		.item {
			&::after {
				content: "+";
			}
		}
	}
}
</style>
